<template>
  <div>
    父级page：{{ page }} <br />
    <h1 :class="['is-active', isRed ? 'red' : '']">子模板处理数据</h1>
    <!-- :page.sync==@update:page="newpage=>page=newpage" -->
    <next-tick
      :citys="city"
      :page.sync="page"
      ref="child"
      @sendflag="getflag"
      name="joe"
    ></next-tick>
    <h1>当前页面处理数据</h1>
    <button @click="getWeather">获取天气</button>
    <button @click="getWeather2">获取天气2</button>
    <button @click="changeCity">改变城市</button>
    <button @click="changechild">通过ref修改子组件的数据</button>
    <button @click="eventbus">中央事件总线传数据</button>
    <p>使用引入的全局过滤器：{{'jump' | stringUpperCase}}</p>
    <div class="data" v-for="item in weather" :key="item.index">
      {{ item.date }},{{ item.temperature }},{{ item.weather }} <br />
    </div>
    <h1>
      vuex来处理数据
    </h1>
    Vuex数据country：{{ this.$store.state.country }}, {{ country }}<br />
    Vuex数据pagesize：{{ this.$store.state.pagesize }} vuex数据中user信息：{{
      this.$store.state.user.sex
    }},{{ this.sex }}
    <button @click="$store.commit('add')">修改Vuex数据</button>
    <button @click="add">Mutations修改Vuex数据</button>
    <button @click="changeSex">修改vuex中某个模块的数据</button>
    <h1>页面跳转的各种方式</h1>
    <router-link to="/commodityStock">页面跳转方法1</router-link> <br />
    <router-link :to="{ name: 'commodityState', params: { setid: page } }"
      >页面跳转方法2</router-link
    >
    <br />
    <router-link :to="{ path: 'commodityState', query: { setid: 123456 } }"
      >页面跳转方法3</router-link
    >
    <br />
    <keep-alive>
      <router-view></router-view>
      <router-view name="a"></router-view>
    </keep-alive>
  </div>
</template>

<script>
import { whether, getEvents } from '@/api/getdata'
import NextTick from '@/components/NextTick.vue'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'commodityIndex',
  components: {
    NextTick,
  },
  data() {
    return {
      child: [
        {
          type_name: '商品库存',
          type_link: '',
        },
      ],
      city: '温州',
      page: 2,
      weather: [],
      isRed: true,
    }
  },
  methods: {
    ...mapMutations(['add']),
    ...mapMutations('user', ['changeSex']),
    getWeather() {
      whether({
        city: this.city,
        key: '4ac9232fe83bee6b10698c29c1ca432c',
      }).then((res) => {
        console.log(res)
        this.whether = []
        for (let i = 0; i < res.result.future.length; i++) {
          let gen = {
            date: '',
            temperature: '',
            weather: '',
          }
          gen.date = res.result.future[i].date
          gen.temperature = res.result.future[i].temperature
          gen.weather = res.result.future[i].weather
          this.weather.push(gen)
        }
      })
    },
    getWeather2() {
      getEvents({
        city: this.city,
        key: '4ac9232fe83bee6b10698c29c1ca432c',
      }).then(res => {
        console.log(res)
      })
    },
    changeCity() {
      this.city = '杭州'
    },
    input(e) {
      console.log(e)
    },
    changechild() {
      this.$refs.child.flag = false
    },
    getflag(flag) {
      console.log(flag)
    },
    eventbus() {
      this.$bus.$emit('sendCity', this.city)
    },
  },
  mounted() {
    const children = this.$refs.child
    console.log(children.flag)
    console.log(this.$children[0].age)
  },
  computed: {
    ...mapState(['country', 'pagesize']), // 经过解构后，自动就添加到了计算属性中，此时就可以直接像访问计算属性一样访问它
    ...mapState('user', ['sex']),
  },
}
</script>

<style lang="less" scoped>
.red {
  color: red;
}
</style>
